<template>
    <div class="tag-container">
        <span>
            标签:
        </span>
        <el-card class="box-card">
            <transition-group name="list-complete" tag="div">
                <div class="tag-inner-container list-complete-item" v-for="(tag,index) in selectTags" :key="tag.id">
                    <el-tag size="mini" closable @close="unSelectTag(index)">{{tag.name}}</el-tag>
                </div>
            </transition-group>
            <TagTabs @selectTag="selectTag"/>
        </el-card>
    </div>
</template>

<script>
    import TagTabs from "./TagTabs";

    export default {
        name: "TagSelector",
        model: {
            prop: "tags",
            event: "change",
        },
        props: {
            tags: {
                type: Array,
                default: () => [],
            }
        },
        data() {
            return {
                selectTags: [],
                selectTagsId: [],
            }
        },
        watch: {
            // 外部改变内部
            tags: {
                handler(newValue) {
                    this.selectTagsId = this.tags;
                }
            },
            // 内部改变外部
            selectTagsId: {
                handler(newValue) {
                    console.log(this.selectTagsId)
                    this.$emit("change", newValue);
                }
            }
        },
        methods: {
            /**
             * 选中标签
             * @param tag 选中的标签
             */
            selectTag(tag) {
                if (this.selectTagsId.indexOf(tag.id) === -1) {
                    this.selectTags.push(tag);
                    this.selectTagsId.push(tag.id);
                }
            },
            /**
             * 取消选中标签
             * @param index 下标
             */
            unSelectTag(index) {
                this.selectTags.splice(index, 1);
                this.selectTagsId.splice(index, 1);
            }
        },
        components: {TagTabs}
    }
</script>

<style scoped>
    .tag-container {
        font-size: 2rem;
    }

    .tag-container span {
        display: inline-block;
        margin-bottom: 1rem;
    }

    .tag-inner-container {
        padding: 0.5rem;
        display: inline-block;
    }

    .list-complete-item {
        transition: all 1s;
        display: inline-block;
    }

    .list-complete-enter, .list-complete-leave-to
        /* .list-complete-leave-active for below version 2.1.8 */
    {
        opacity: 0;
        transform: translateY(30px);
    }

    .list-complete-leave-active {
        position: absolute;
    }
</style>